【Day25】一個開始華麗變身～！

2018鐵人賽 reactjs 瑞瑞腦袋日記2.0

洪啟瑞

團隊30天熱度

2018-01-13 23:14:03

2202 瀏覽

分享至

今天
看著這些畫面
想著
一個畫面長成這樣的
應該沒有人會想用吧？
所以
是時候發出強大的光芒
搖身一變的時候了
但是
變身往往是需要一點時間的
所以
今天就來講講變身的方法
React 的 Style 寫法囉~

css style

React 中有兩種方式可以寫入 css
第一種是我們習慣的透過 link 標籤引入 css 檔案
寫法和一般的網頁無異

<!DOCTYPE html>
<html>
    <head>
        <title>React test</title>
        <link rel="stylesheet" type="text/css" 
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
    </head>
    <body>
        <div id = "app"></div>
        <script src = "index.js"></script>
    </body>
</html>

例如我這邊引入了 bootstrape 的樣式表
透過給予 class 來讓對應的樣式套用上去
不過我這個並不是最好的方式
因為bootstrape一個樣式表檔案裡面寫了非常多不同的樣式
可是有些我並沒有使用到
白白佔用了空間
比較好的方式是找到需要使用的那些樣式
再針對他們做引入的動作
說到透過 class 套用
和習慣的網頁寫法比較不一樣的是
在 render 函式中要賦予標籤class屬性
JSX 語法要透過className這個關鍵字來表示

return (
   <Router>
      <div className="container">
         <img className="logo" src="asset/logo.png" />
         <hr/>
         <ul className="col-md-4 gameList">
            <li><Link to={'/ooxx'}>圈圈叉叉</Link></li>
            <li><Link to={'/aabb'}>數字猜猜</Link></li>
            <li><Link to={'/'}>回首頁</Link></li>
         </ul>
         <Switch className="col-md-8">
            <Route exact path="/"
                   children={
                     <Home user={this.state.user} onClick={this.logout} />
                     }  
            />
            <Route exact path="/ooxx" component={OX} />
            <Route exact path='/aabb' component={AB} />
         </Switch>
      </div>
   </Router>
);

在這段程式碼裡面
就會產生一個具有 container 這個 class 的 div 標籤
裡面包有 logo 這個 class 的 img
以及剩下的清單和對應的組件
如果把 className 寫成 class
那產生出來的 div 標籤就吃不到這個 container 囉~

除了引入 css 檔案
還有一個是 React 提供寫在組件內部的 style 寫法

render(){
    var loginPrompt = {
       textAlign: 'center',
       paddingTop: '15px',
       paddingBottom: '15px'
    }

    return(
       <div className="loginBlock">
          <h1 style= {loginPrompt} >你好，先登入一下如何？</h1>
          <form onSubmit={this.login}>
             <input type="text" 
                    placeholder="請輸入您的大名" 
                    onChange={this.handleChange}/>
             <input type="submit" value="確認" />
          </form>
       </div>
    );
}

首先要在 render 函式中先建立一個變數
這個變數是要用來存放給網頁元素的樣式描述
要特別注意的是
有些樣式名稱是複合式命名（中間有槓槓）
這些屬性要改成駝峰式寫法才能夠被識別並且呈現出來
例如
text-align 要改寫成 textAlign
padding-top 則會變成 paddingTop

寫好了之後
再透過標籤的 style 屬性
把剛剛寫好的變數給它
接著神奇的事情就會發生了
塔啷
畫面就變美麗啦！
不過這其實是等同在組件渲染的時候直接寫到 html 裡面的意思
以一般網頁程式開發的邏輯來看可能會覺得這樣程式碼混雜互相污染不是個好的寫法
不過還從 React 注重效能的角度來看
沒有使用的時候這些樣式資訊不用載入
自然也不用多一個描述這些長相的 css 檔案來佔用空間
又因為直接寫在對應的組件渲染的地方
所以能夠快速的找到需要修改或調整的樣式位置
從這些點看來
React的樣式寫法其實也非常的不錯呢！

以上就是 React 的 style 寫法
好的
施工需要時間
老實說今天一個發作導致他還沒徹底變身完成
美好的事物總是值得等待
就明天再讓它華麗登場囉～
歐壓斯咪